

import React from 'react'
import {View,Image,Text,TextInput,FlatList,TouchableOpacity} from 'react-native'

import constant from '../Common/Constant'
let searchImg = require('../Img/icon_search_2x.png')
let locationImg = require('../Img/icon_location.png')
import RequestUtils from '../Common/NetUtils'
export default class GoodsList extends React.Component{

    static navigationOptions = ({navigation}) =>(
        {
            headerStyle: {
                height: 50,
                backgroundColor: '#40CCCB',
                elevation: 0,
            },
            title: '商品',
            headerTitleStyle: {
                color: '#FFFFFF',
                alignSelf: 'center',
            },
            headerLeft: <TouchableOpacity style={{marginLeft: 10}} onPress={() => navigation.goBack()}>
                <Image resizeMode='contain' source={require('../Img/icon_back.png')} style={{width:20,height:20}}/>
            </TouchableOpacity>,
        }
    )

    constructor(props){
        super(props)
        this.state={
            GoodsData:[]
        }
    }

    render(){
        return(
            <View style={{flex:1,backgroundColor:'#fff'}}>
                <View style={{height:31, margin:12,backgroundColor:'#EBEBEB',flexDirection:'row',alignItems:'center'}}>
                    <Image style={{width:17,height:17,marginLeft:7}} source={searchImg}/>
                    <TextInput style={{marginLeft:12,marginRight:16,flex:1,fontSize:12,padding:0}} underlineColorAndroid='transparent'/>
                </View>
                <FlatList
                    data={this.state.GoodsData}
                    renderItem={({item}) =>this._renderItem(item)}
                />
            </View>
        )
    }

    _renderItem(item){
        return(
            <View style={{width:'100%',height:120,flexDirection:'row',alignItems:'center'}}>

                <Image style={{width:117,height:88,marginLeft:16}} source={{uri:item.img}}/>
                <View style={{height:88,flex:1,marginLeft:15,marginRight:15,justifyContent:'space-between'}}>
                    <Text style={{fontSize:17}}>{item.shopName}</Text>
                    <View style={{flexDirection:'row',alignItems:'center'}}>
                        <Image style={{width:12,height:15}} source={locationImg}/>
                        <Text style={{fontSize:12,marginLeft:8}}>{item.addressName}</Text>
                    </View>
                    <View style={{height:22,flexDirection:'row',backgroundColor:'#cfc',justifyContent:'space-between',alignItems:'center'}}>
                        <Text style={{fontSize:17,color:'#EE2F36'}}>
                            ￥{item.money}
                        </Text>

                        <View style={{width:50,height:22,justifyContent:'center',alignItems:'center',borderRadius:10,backgroundColor:'#40CCCB'}}>
                            <Text style={{fontSize:12,color:'#fff'}}>可租用</Text>
                        </View>
                    </View>

                </View>
            </View>
        )
    }


    _fetchHotData(){
        let params = {'currentPage':1,'pageSize':20,'type':1};
        RequestUtils.getData(constant.URL_GOODS_SHARE,params,(result) =>{
            this.setState({GoodsData:result.data})
        })
    }

    componentDidMount() {
        this._fetchHotData()
    }
}